<template>
	<div class="panel">
		<div class="condition">
			<div class="row_one">
				<el-select v-model="param.schoolYearId" clearable 
						   placeholder="全部学年" style="width: 1.8rem;" >
				    <el-option v-for="item in schoolYearList" :key="item.schoolYearId"
				      		   :label="item.name" :value="item.schoolYearId">
				    </el-option>
				</el-select>
				&nbsp;
				<el-select v-model="param.gradeTypeId" clearable
						   placeholder="全部年级" style="width: 1.8rem;" >
				    <el-option v-for="item in gradeList" :key="item.gradeTypeId"
				      		   :label="item.name" :value="item.gradeTypeId">
				    </el-option>
				</el-select>
				&nbsp;
				<el-select v-model="param.classId" clearable
						   placeholder="全部班级" style="width: 1.8rem;" >
				    <el-option v-for="item in classList" :key="item.value"
				      		   :label="item.name" :value="item.value">
				    </el-option>
				</el-select>
				&nbsp;
				<el-input style="width: 3.5rem;" placeholder="搜索 学员姓名/手机号/联系人" clearable
	   				 		  v-model="param.keyword" class="input_search" maxlength="100">
	  			</el-input>
	  			&nbsp;
	  			<div class="search_btn" @click="search()">搜索</div>
			</div>
		</div>
		
		<div>
			<table class="table" cellspacing="0">
				<thead class="thead">
					<tr>
						<td style="width: 2rem;">孩子姓名</td>
						<td style="width: 4rem;">出生日期</td>
						<td style="width: 2rem;">计划就读班级</td>
						<td style="width: 2rem;">计划入园日期</td>
						<td style="width: 2rem;">监护人</td>
						<td style="width: 2rem;">联系电话</td>
						<td style="width: 2rem;">备注</td>
						<td style="width: 2rem;">操作</td>
					</tr>
				</thead>
				<tbody class="tbody">
					<tr v-for="item,index in studentList">
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td v-if="item.entryTime">{{item.entryTime}}</td>
						<td v-else>
							<span class="operate_btn" @click="openEntryTime(item)">未设，去设定</span>
						</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>
							<span class="operate_btn" @click="openDetail(item)">查看</span>
							&nbsp;
							<span class="operate_btn" @click="openEntryClass(item)">进班</span>
							&nbsp;
							<span class="operate_btn" @click="openGiveUp(item)">放弃</span>
						</td>
					</tr> 
				</tbody>
			</table>
		</div>
		<el-pagination
	      layout="total, sizes, prev, pager, next, jumper"
	      :current-page="param.currPage"
	      @size-change="pageSizeChange"
      	  @current-change="pageIndexChange"
	      :total="count">
	    </el-pagination>
	    
	    <el-dialog title="设定" width="30%" :visible.sync="entryTimeVisible">
			<entryTime ref="entryTime" @close="entryTimeVisible=false" @ok="entryTimeOk"></entryTime>
		</el-dialog>
		
		<el-dialog title="进班" width="30%" :visible.sync="entryClassVisible">
			<entryClass ref="entryTime" @close="entryClassVisible=false" @ok="entryClassOK"></entryClass>
		</el-dialog>
		
		<el-dialog title="学员详情" width="30%" :visible.sync="detailVisible">
			<detail ref="detail" @close="detailVisible=false"></detail>
		</el-dialog>
		
		<el-dialog title="放弃入园" width="30%" :visible.sync="giveUpVisible">
			<giveUp ref="giveUp" @close="giveUpVisible=false"></giveUp>
		</el-dialog>
	    
	</div>
</template>

<script>
import entryTime from './common/student_entry_time';
import entryClass from './common/student_entry_class';
import detail from './common/student_detail';
import giveUp from './common/student_give_up';

var vm;
export default {
	components : {
		entryTime,entryClass,detail,giveUp
	},
	data() {
		return {
			param : {
				campusId: this.$store.state.campusId,
				schoolYearId : "",
				gradeTypeId: "",
				classId: "",
				keyword: "",
				currPage: 1,
				pageSize: 10
			},
			studentList : [],
			count: 0,
			//弹窗显示控制
			entryTimeVisible: false,
			entryClassVisible: false,
			detailVisible: false,
			giveUpVisible: false,
		}
	},
	computed : {
		schoolYearList: function() {
			return this.$parent.schoolYearList;
		},
		gradeList: function() {
			return this.$parent.gradeList;
		},
		classList: function() {
			return this.$parent.classList;
		}
	},
	methods : {
		search(currPage) {
			vm.param.currPage = currPage || 1;
			
			api.studentList(vm.param).then(data => {
//				vm.studentList = data.list;
				vm.studentList = [{name:"小明", entryTime:"2019-02-06"},
								{name:"小明", entryTime:null},
								{name:"小明", entryTime:"2019-02-06"}];
				vm.count = data.totalCount;
			})
		},
		campusChange() { //校区改变
			vm.param.campusId = vm.$store.state.campusId;
			vm.search();
		},
		pageSizeChange(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	},
	  	openEntryTime(student) {
	  		vm.entryTimeVisible = true;
	  		vm.$refs.entryTime.init();
	  	},
	  	entryTimeOk() {
	  		
	  	},
	  	openEntryClass(student) {
	  		vm.entryClassVisible = true;
	  		vm.$refs.entryClass.init();
	  	},
	  	entryClassOK() {
	  		
	  	},
	  	openDetail(student) {
	  		vm.detailVisible = true;
	  		vm.$refs.detail.init();
	  	},
	  	openGiveUp(student) {
	  		vm.giveUpVisible = true;
	  		vm.$refs.giveUp.init();
	  	},
	  	
	},
	created() {
		vm = this;
		vm.search();
	}
}
</script>

<style scoped src="@/style/module/table.css"></style>
<style scoped>
	.panel {
		background-color: white;
		border: 0.01rem solid #ededed;
		border-radius: 0.1rem;
		padding: 0 0.3rem 0.3rem 0.3rem;
		color: #666666;
	}
	
	.condition {
		padding-bottom: 0.1rem;
	}
	.row_one {
		padding: 0.2rem 0 0.1rem 0;
		overflow: hidden;
	}
</style>